<%-- <%@ page language="java" contentType="text/html; charset=ISO-8859-1" --%>
<%--     pageEncoding="ISO-8859-1"%> --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- <div%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->

<script type="text/ecmascript" src="assets/vendor/jquery/jquery.3.2.1.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/codemirror/codemirror.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/codemirror/modes.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/codemirror/addons.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/marked.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/prettify.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/raphael.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/underscore.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/sequence-diagram.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/flowchart.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/lib/jquery.flowchart.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/editor.md/editormd.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/bootstrap/popper.min.js"></script>
<script type="text/ecmascript" src="assets/vendor/bootstrap/bootstrap.min.js"></script>

<link rel="stylesheet" href="assets/vendor/editor.md/css/editormd.css" />
<style>
</style>
<div class="container-fluid p-0 h-100" id="releaseNoteContainer">
	<!-- class raw-->
	<div class='d-flex flex-row w-100 h-100 m-0'>
		<div class="h-100" style="width: 162px;">
			<!--orginal has class col-2-->
			<div class="d-flex flex-column flex-fill p-3 h-100 border-right border-dark bg-dark text-white">
				<div class="d-flex flex-row align-items-center justify-content-center text-white text-decoration-none w-100 border-bottom border-light"
					style="height: 20%;">
					<svg xmlns="http://www.w3.org/2000/svg" width="20%" height="75%" fill="currentColor"
						class="bi bi-map  mr-2" viewBox="0 0 16 16">
						<path fill-rule="evenodd"
							d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z" />
					</svg>
					<span class="h4 text-center m-0">Version</span>
				</div>
				<div class="d-flex flex-column align-items-center" style="height: 5%;">
					<div></div>
				</div>
				<div class="nav flex-column nav-pills mb-auto" id="v-pills-tab" role="tablist"
					aria-orientation="vertical">
					<c:forEach items="${releaseNotes}" var="releaseNote">
						<a class="nav-link ml-0 mr-auto" id="pill-${releaseNote.objId}-tab" data-toggle="pill"
							href="#pill-${releaseNote.objId}" role="tab" aria-controls="pill-${releaseNote.objId}"
							aria-selected="false">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
								class="bi bi-dot" viewBox="0 0 16 16">
								<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
							</svg>
							<span class="text-center m-0">${releaseNote.version}</span>
							<!-- <p>${releaseNote.content}</p> -->
						</a>
					</c:forEach>
				</div>
			</div>
		</div>
		<!--orginal has class col-10-->
		<div id="content" class="p-0" style="height: 90vh; overflow-y: scroll; flex:1">
			<!-- <div class="m-0 p-0 h-100"> -->
			<!-- open x orientaion scroll, unnecessary -->
			<!-- <div class="tab-content h-100" id="v-pills-tabContent" style="width: 100%; overflow-x: scroll;"> -->
			<div class="tab-content h-100" id="v-pills-tabContent">
				<c:if test="${releaseNotes.isEmpty() }">
					<div class="editRelease h-100"></div>
				</c:if>
				<c:forEach items="${releaseNotes}" var="releaseNote">
					<div class="tab-pane fade h-100" id="pill-${releaseNote.objId}" role="tabpanel"
						aria-labelledby="pill-${releaseNote.objId}-tab">
						<div class="editRelease h-100" id="${releaseNote.objId}">
							<div id="show${releaseNote.objId}"></div>
						</div>
					</div>
				</c:forEach>
			</div>
			<!-- </div> -->
		</div>
	</div>
</div>
<!--             <div id="toc"> -->
<!--                 <nav id="toc-bar" class="nav flex-column"> -->
<!--                     <span class="nav-item nav-link active m-auto"> Release Version </span> -->
<!--                     <ul> -->
<%--                         <c:forEach items="${releaseNotes}" var="releaseNote"> --%>
<%--                             <li class="nav-item"><a href="#${releaseNote.objId}" class="nav-link">${releaseNote.version}</a></li> --%>
<%--                        </c:forEach> --%>
<!--                     </ul> -->
<!--                 </nav> -->
<!--             </div> -->

<script type="text/javascript">
	$(function () {
		if ((typeof (contextReady) != "undefined") && (typeof (contextmenuInit) != "undefined")) {
			contextReady();
			contextmenuInit();
			//$("#releaseNoteContainer").removeClass("container-fluid").addClass("container");
		}
		var releaseNotes;
		$.ajax({
			method: "post",
			url: "getReleaseNotesList.do",
			dataType: "json",
			success: function (data) {
				releaseNotes = data.rtnVal;
				//show first release
				objId = releaseNotes[0].objId;
				$("#pill-" + objId + '-tab').attr('aria-selected', 'true').addClass('active');
				$("#pill-" + objId).addClass("show").addClass("active");

				for (releaseNote in releaseNotes) { // releaseNote is just the key
					releaseNote = releaseNotes[releaseNote];
					markdown = releaseNote.content;
					editormd.markdownToHTML("show" + releaseNote.objId, {
						markdown: markdown,
						tocm: true,
						tocStartLevel: 2 // default is 1
					});
				}
			}
		});
	})
	// $($(".tab-pane.active").children()[0]).children(".markdown-body").children(":header")
</script>